// 实现这个项目的构建任务

const { src, dest, series, parallel, watch } = require('gulp');
const del = require('del');
const gulpLoadPlugins = require('gulp-load-plugins');
const bs = require('browser-sync').create();

// 加载 gulp 的所有插件 gulp-load-plugins
const plugins = gulpLoadPlugins();

// 填充模板的上下文数据
const data = {
  pkg: require('./package.json'),
  title: '小付君',
  date: new Date(),
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
}

// 清除任务 
// 使用到的插件 del
// del() 方法返回的是个 Promise
const clean = () => {
  return del(['dist', 'temp']);
}

// 构建 sass 文件任务
// 用到的插件 gulp-sass，会自动安装 node-sass 模块
// 压缩 css 插件 gulp-clean-css
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(plugins.sass({ ooutputStyle: 'expanded' }))
    .pipe(dest('temp'));
} 

// 构建 js 任务
// 使用 gulp-babel 插件配合 gulp-uglify 插件 
// gulp-rename 重命名插件
const js = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'));
}

// 构建 html 任务
// 使用 gulp-swig 插件配合 gulp-htmlmin 插件
const html = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ 
      data,
      defaults: {
        cache: false // 防止模板缓存导致页面不能及时更新（重点）
      }
    }))
    .pipe(dest('temp'));
}

// 压缩图片
// 插件 gulp-imagemin
const image = () => {
  return src('src/assets/images/*.*', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'));
}

// 压缩字体
const font = () => {
  return src('src/assets/fonts/*.*', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'));
}

// copy 文件
const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'));
}

// web 服务
// 使用插件 browser-sync
const serve = () => {
  watch(['src/assets/styles/*.scss'], style);
  watch(['src/assets/scripts/*.js'], js);
  watch(['src/**/*.html'], html);
  watch(['src/assets/images/*.*', 'src/assets/fonts/*.*', 'public/**'], bs.reload);

  bs.init({
    notify: false,
    server: {
      baseDir: ['temp', 'src', 'public'], // 查找资源的路径
      routes: {
        '/node_modules': 'node_modules' // 资源的代理指定
      }
    },
    watch: true,  // 监控文件的变动
  })
}

// html 中 js、css 文件的压缩
const useref = () => {
  return src('temp/*.html', { base: 'temp' })
    .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify({ sourceMap: true })))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss({ keepBreaks: false })))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({ collapseWhitespace: true })))
    .pipe(dest('dist'));
}

// 编译任务
const compiler = parallel(style, js, html);
// 开发任务 
const start = series(compiler, serve); 
// 构建打包任务
const build = series(clean, compiler, parallel(image, font, extra, useref));

module.exports = {
  clean,
  start,
  compiler,
  serve,
  build
}
